<template>
  <div class="item" v-if="detail">
    <img :src="'https://images.weserv.nl?url='+detail.images.large" alt />
    <div>
      <p>豆瓣评分：{{detail.rating.average}}</p>
      <p>产地：{{detail.countries[0]}}</p>
      <p>
        <span v-for="(item,i) in detail.genres" :key="i" class="tag">{{item}}</span>
      </p>
      <p>{{detail.summary}}</p>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";

export default {
  computed: {
    ...mapState(["detail"])
  },
  methods: {
    ...mapActions([
      "getFilmDetail" //also supports payload `this.nameOfAction(amount)`
    ])
  },
  created() {
    this.getFilmDetail(this.$route.params.id);
  }
};
</script>

<style lang="less" scoped>
</style>